import React, { useState, useEffect } from 'react'
import { Button, Select, InputNumber, Checkbox, Row, Col, Input } from 'antd';
import "./classCompile.less"
import { classApi_collageEdit } from '../../api/Grade'
export default function ClassCompile(props) {
    let { close, xcon } = props
    const { Option } = Select;
    const { TextArea } = Input;
    // 左侧校区分类
    const [classScholl, setClassScholl] = useState([])
    // 分区 网站工程，传媒......
    const [partition, setPartition] = useState(xcon.college)
    // 校区 北京 保定...
    const [classCompile, setClassCompile] = useState('')
    // 最多容纳的人数 
    const [galleryful, setGalleryful] = useState(xcon.galleryful)
    // 其他物品  多选框的
    const [otherCheckbox, setOtherCheckbox] = useState(JSON.parse(xcon.property))
    const [isId, setIsId] = useState(xcon.id)
    // 情况说明 多行文本
    const [information, setInformation] = useState('')
    // 左侧菜单栏
    const list = [
        {
            "id": 1,
            "collage": "网站工程",
            "school": [
                {
                    "sid": "wbj",
                    "name": "北京校区",
                    "classList": [
                        {
                            "cid": "wbjg",
                            "name": "专高",
                        },
                        {
                            "cid": "wbjs",
                            "name": "实训"
                        }
                    ]
                }, {
                    "sid": "wbd",
                    "name": "保定校区",
                    "classList": [
                        {
                            "cid": "wbjg",
                            "name": "专高"
                        },
                        {
                            "cid": "wbjs",
                            "name": "实训"
                        }
                    ]
                },
                {
                    "sid": "whd",
                    "name": "邯郸校区",
                    "classList": [
                        {
                            "cid": "wbjg",
                            "name": "专高"
                        },
                        {
                            "cid": "wbjs",
                            "name": "实训"
                        }
                    ]
                }
            ]
        },
        {
            "id": 2,
            "collage": "传媒学院",
            "school": [
                {
                    "sid": "cbd",
                    "name": "保定校区",
                    "classList": [
                        {
                            "cid": "cbdg",
                            "name": "专高"
                        },
                        {
                            "cid": "cbds",
                            "name": "实训"
                        }
                    ]
                }
            ]
        },
        {
            "id": 3,
            "collage": "计算机学院",
            "school": [
                {
                    "sid": "jbd",
                    "name": "保定校区",
                    "classList": [
                        {
                            "cid": "jbdg",
                            "name": "专高"
                        },
                        {
                            "cid": "jbds",
                            "name": "实训"
                        }
                    ]
                }
            ]
        },
        {
            "id": 4,
            "collage": "人工智能学院",
            "school": [
                {
                    "sid": "rbd",
                    "name": "保定校区",
                    "classList": [
                        {
                            "cid": "rbdg",
                            "name": "专高"
                        },
                        {
                            "cid": "rbds",
                            "name": "实训"
                        }
                    ]
                }
            ]
        }
    ]
    // 校区分类
    const schoolFun = () => {
        let arr = []
        list.map((item, index) => {
            return (
                item.school.filter((ite, index) => {
                    arr.push(ite.name)
                })
            )

        })
        setClassScholl(arr.filter((item, index) => {
            return arr.indexOf(item) === index
        }))

    }
    // 判断回显 wbj wbd......
    const echoFun = (con) => {
        let res = con.substring(1)
        if (res === 'bj') {
            return '北京校区'
        } else if (res === 'bd') {
            return "保定校区"
        } else if (res === "hd") {
            return '邯郸校区'
        }
    }
    useEffect(() => {
        // 校区分类
        schoolFun()
        // id
        setIsId(xcon.id)
    }, [])

    // 分区下拉框 网站工程......
    const changepartition = (value, option) => {
        setPartition(option.children)
    }
    // 校区的下拉框  北京保定...
    const changeClassCompile = (value, option) => {
        console.log(value);
        console.log(option.value);

        setClassCompile(option.value)
    }
    // 最多容纳人数 数字输入框的
    const changeGalleryful = (value) => {
        setGalleryful(value)
    }
    // 多选框的
    // const changeOther = (checkedValues) => {
    //     console.log(`checked = ${checkedValues}`);
    // }
    const othersCheckbox = (e, index, item) => {
        // otherCheckbox[index].isFlag = !otherCheckbox[index].isFlag
        // setOtherCheckbox(otherCheckbox[index].isFlag)
        console.log('多选框',e);

    }
    // 情况说明 textarea
    const informationNote = (e) => {
        setInformation(e.target.value)
    }
    return (
        <div className='class_classCompile'>
            <div className='classCompileMain'>
                <div>
                    <span className='class_partition'>分区</span>
                    <Select defaultValue={xcon.college} style={{ width: 360 }} onChange={changepartition}>
                        {
                            list.map((item, index) => {
                                return (
                                    <Option
                                        key={index}
                                        disabled={item.collage === xcon.college ? true : false}
                                        vlaue={item.collage}
                                    >{item.collage}</Option>
                                )
                            })
                        }
                    </Select>
                </div>
                <div className='classCompile_partition'>
                    <div className='partition_left'>
                        <span className='class_partition'>校区</span>
                        <Select defaultValue={echoFun(xcon.campus)} style={{ width: 120 }} onChange={changeClassCompile}>
                            {
                                classScholl.map((item, index) => {
                                    return <Option
                                        key={index}
                                        disabled={item === echoFun(xcon.campus) ? true : false}
                                        value={item}
                                    >{item}</Option>
                                })
                            }
                        </Select>
                    </div>
                    <div>
                        <span className='class_partition'>容纳人数</span>
                        <InputNumber min={0} max={60} defaultValue={xcon.galleryful} onChange={changeGalleryful} />
                    </div>
                </div>
                <div className='classCompile_checkbox clear'>
                    <p>其他物品</p>
                    {
                        JSON.parse(xcon.property).map((item, index) => {
                            if (item.isFlag) {
                                return <Checkbox
                                    key={index}
                                    value={item.det}
                                    checked={otherCheckbox[index].isFlag}
                                    style={{ textIndent: "0em" }}
                                    onChange={(e) => { othersCheckbox(e, index, item) }}
                                >{item.det}</Checkbox>
                            }
                        })
                    }
                </div>
                <div className='class_presentation'>
                    <p>情况说明</p>
                    <TextArea style={{ resize: "none" }} onChange={informationNote} placeholder="请输入内容" rows={4} />
                </div>
            </div>
            <div className="but">

                <Button type="primary" onClick={close}>取消</Button>
                <Button type="primary" onClick={() => {
                    // partition  分区 网站 传媒...
                    // classCompile  校区 北京 保定
                    // galleryful  最多容纳人数
                    // information 情况说明
                    // console.log(partition, classCompile, galleryful, information);
                    if (partition || classCompile || galleryful || information) {
                        classApi_collageEdit({ isId, partition, classCompile, galleryful, information })
                    }
                    close()
                }} >确定</Button>
            </div>
        </div >
    )
}
